<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="cateList" @change="cateChange" :current="current" lineColor="#23c993" keyName="title" lineWidth="30" :activeStyle="{color: '#23c993',fontWeight: 'bold',transform: 'scale(1.05)'}"></u-tabs>
		</u-sticky>
		<view class="recommend">
			<view class="item" v-for="(item,index) in list" :key="index" @click="go('/pages/info/detail?id=' + item.info_id)">
				<u--image :showLoading="true" :src="item.img" width="200rpx" height="150rpx"></u--image>
				<view class="info">
					<view class="title">{{item.title}}</view>
					<view class="price">
						<text class="price-num">{{item.price}}</text>
						<text class="unit">{{item.unit}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" v-if="list.length <= 0"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				region_name: '请选择城市',
				region_id: '',
				notices:[],
				ban: [
				],
				cateList: [],
				list: [],
				current:0,
				is_more: 0,
				query: {
					recommend: 1,
					type: undefined,
					page: 1,
					size: 10
				},
			};
		},
		onShow() {
			uni.$once("city",(data)=>{
				this.region_name = data.region_name;
				this.region_id = data.region_id;
				uni.setStorageSync("CITYDATA",data);
				this.query.page = 1;
				this.getRecommentListFun();
			})
			
			if(!uni.getStorageSync("CITYDATA")){
				this.toSelectCity();
			}else{
				var data = uni.getStorageSync("CITYDATA");
				this.region_name = data.region_name;
				this.region_id = data.region_id;
			}
			// this.getRecommentListFun();
		},
		onLoad() {
			this.getHomeIndexFun();
			
		},
		onReachBottom() {
			if (this.is_more) {
				this.getRecommentListFun();
			}
		},
		methods: {
			toSelectCity(){
				uni.navigateTo({
					url: "/pages/mine/region"
				})
			},
			go(url){
				uni.navigateTo({
					url
				})
			},
			cateChange(e){
				this.current = e.index;
				this.query.type = e.category_id
				this.query.page = 1;
				this.getRecommentListFun();
			},
			getRecommentListFun(){
				var _this = this;
				uni.$u.http.post('/Info/page',{...this.query,region_id: this.region_id}).then(async res =>{
					let curPageData = res.lists;
					if (this.query.page == 1) {
						_this.list = [];
					}
					if (res.is_more) {
						_this.query.page++;
					}
					_this.is_more = res.is_more;
					_this.list = _this.list.concat(curPageData);
				}).catch(err => {
				})
			},
			getHomeIndexFun(){
				uni.$u.http.get('/Home/recommendCate').then(async res =>{
					this.ban = res.lunbo
					this.cateList = res.category
					this.query.type = this.cateList[0].category_id
					this.getRecommentListFun();
				}).catch(err => {
				})
			},
			goCate(item){
				uni.navigateTo({
					url:'/pages/info/list?type=' + item.category_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cateList{
		padding: 20rpx 0 30rpx 0;
	}
	.grid-text{
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.recommend{
		padding: 0 30rpx;
		.item{
			margin-top: 30rpx;
			display: flex;
			.info{
				flex: 1;
				margin-left: 30rpx;
				.title{
					font-size: 32rpx;
				}
				.price{
					.price-num{
						font-size: 36rpx;
						font-weight: 600;
						color: red;
					}
					.unit{
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>